import { Component } from 'react';
import './header.scss'
class Header extends Component {

    state = {
        commentator: "",
        commentData: "",
        commentator1: "",
        commentData2: ""
    }
    Commentator = (e) => {
        this.setState({
            commentator: e.target.value
        })
    }
    CommentData = (e) => {
        this.setState({
            commentData: e.target.value
        })
    }
    publish = (e) => {
        // this.setState({})
        console.log(this.state);
        this.setState({
            commentator1:this.state.commentator,
            commentData2:this.state.commentData,
            commentator: "",
            commentData: "",
        }, function () {
            this.props.release(this.state.commentator1,this.state.commentData2)
        })
    }
    empty=()=>{
        this.setState({
            commentator: "",
            commentData: "",
        })
    }
    render() {
        return (<>
            <div className='header'>

                <div className='headerTop'>
                    <input type="text" placeholder='请输入评论人' value={this.state.commentator} onChange={this.Commentator} />
                </div>

                <div className='headerBotton'>
                    <textarea placeholder='请输入评论内容' value={this.state.commentData} onChange={this.CommentData}></textarea>
                </div>

                <div className='headerButton'>
                    <button onClick={this.publish}>发表评论</button>
                    <button onClick={this.empty}>清空</button>
                </div>
            </div>
        </>);
    }
}

export default Header;